import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init('WebGL-avatarInput');
  }

  public willUnmount() {
    webGlControl.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <div className={styles.main}>
        <div className={styles.avatarBox}>
          <div className={styles.avatarBg}></div>
          <div className={styles.canvasBox} id="WebGL-avatarInput" />
        </div>

        <div className={styles.inputBox}>
          <input
            className={styles.input}
            type="password"
            onFocus={() => {
              webGlControl.inputFocus = true;
            }}
            onBlur={() => {
              webGlControl.inputFocus = false;
            }}
            onChange={(e) => {
              webGlControl.inputStateChange(
                e.target.selectionStart,
                e.target.selectionEnd,
              );
            }}
            onClick={(e) => {
              webGlControl.inputStateChange(
                e.target.selectionStart,
                e.target.selectionEnd,
              );
            }}
            onKeyUp={(e) => {
              if (
                e.code == 'ArrowLeft' ||
                e.code == 'ArrowRight' ||
                e.code == 'ArrowUp' ||
                e.code == 'ArrowDown' ||
                e.key == 'Meta'
              ) {
                webGlControl.inputStateChange(
                  e.target.selectionStart,
                  e.target.selectionEnd,
                );
              }
            }}
          />
        </div>
      </div>
    );
  }
}
